<template>
	<div>
		<span>
			<font size="5" color="grey" background-color="grey">挂号信息</font>
		</span>
		<el-divider></el-divider>
		<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
			<el-row class="arow">
				<el-col class="add" :span="12" :offset="2">
					<el-form-item label="就诊卡ID" prop="idnumber" required="">
						<el-input v-model="ruleForm.idnumber" style="width: 200px;"></el-input>
					</el-form-item>
				</el-col>
				<el-col class="add" :span="10">
					<el-form-item label="号别" prop="kind" required="">
						<el-select v-model="ruleForm.kind" placeholder="请选择号别">
							<el-option label="普通号" value="普通号"></el-option>
							<el-option label="专家号" value="专家号"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row type="flex" class="arow" justify="space-around">
				<el-col class="add" :span="12" :offset="2">
					<el-form-item label="姓名" prop="name" required="">
						<el-input v-model="ruleForm.name" style="width: 200px;"></el-input>
					</el-form-item>
				</el-col>
				<el-col class="add"  :span="10">
					<el-form-item label="看诊科室" prop="room" required>
						<el-input v-model="ruleForm.room" style="width: 200px;"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="arow">
				<el-col  class="add" :span="12" :offset="2">
					<el-form-item label="性别" prop="sex" required="">
						<el-input v-model="ruleForm.sex" style="width: 200px;"></el-input>
					</el-form-item>
				</el-col>
				<el-col class="add" :span="10">
					<el-form-item label="年龄" prop="age" required="">
						<el-input v-model="ruleForm.age" style="width: 200px;"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="arow">
				<el-col class="add" :span="12" :offset="2">
					<el-form-item label="身份证号" prop="number">
						<el-input v-model="ruleForm.number" style="width: 200px;"></el-input>
					</el-form-item>
				</el-col>
				<el-col class="add" :span="10">
					<el-form-item label="家庭住址" prop="address">
						<el-input v-model="ruleForm.address" style="width: 200px;"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="arow">
				<el-col  class="add" :span="12" :offset="2">
					<el-form-item label="看诊时间" prop="day" required>
						<el-date-picker type="date" placeholder="选择日期" value-format="yyyy年M月dd日" v-model="ruleForm.day" style="width: 200px;">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col class="add"  :span="10">
					<el-form-item label="应收金额" prop="money" required="">
						<el-input v-model="ruleForm.money" style="width: 200px;"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col  class="add" :span="12" :offset="2">
					<el-form-item label="看诊医生" prop="doctor" required="">
						<el-input v-model="ruleForm.doctor" style="width: 200px;"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item>
				<el-row>
					<el-col  class="add" :span="12" :offset="4">
						<el-button type="primary" @click="submitForm('ruleForm')">挂号</el-button>
					</el-col>
					<el-col class="add" :span="2" pull="2">
						<el-button @click="resetForm('ruleForm')">重置</el-button>
					</el-col>
				</el-row>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {showMsgTitle} from '@/utils/api'
	import {showMsgConfirm} from '@/utils/api'
	import {getRequest}   from '@/utils/api'
	import {postRequest}   from '@/utils/api'
	import {uploadFileRequest}   from '@/utils/api'
	import {putRequest}   from '@/utils/api'
	import {deleteRequest}   from '@/utils/api'
	import {showConstants}   from '@/utils/api'
	export default {
		data() {
			return {
				ruleForm: {
					idnumber: '',
					kind: '',
					name: '',
					room: '',
					sex: '',
					age: '',
					number: '',
					address: '',
					day: '',
					money: '',
					doctor: ''
				},
				rules: {
					idnumber: [{
						required: true,
						message: '请输入就诊卡ID',
						trigger: 'blur'
					}],
					name: [
						{
							required: true,message: '请输入姓名',trigger: 'blur'
						},
						{
							min: 2,max: 4,message: '长度在 2 到 5 个字符',trigger: 'blur'
						}
					],
					kind:[
						{
							required: true,message: '请选择号别',trigger: 'blur'
						}
					],
					room :[
						{
							required: true,message: '请输入就诊科室',trigger: 'blur'
						}
					],
					sex :[
						{
							required: true,message: '请输入性别',trigger: 'blur'
						}
					],
					age:[
						{
							required: true,message: '请输入患者年龄',trigger: 'blur'
						},
						{
							min: 1,max: 120,message: '年龄在 1 到 120 之间',trigger: 'blur'
						}
					],
					money:[
						{
							required: true,message: '请输入挂号金额',trigger: 'blur'
						}
					],
					doctor:[
						{
							required: true,message: '请输入就诊医生',trigger: 'blur'
						},
						{
							min: 2,max: 4,message: '长度在 2 到 4 个字符',trigger: 'blur'
						}
					]
				}
			};
		},
		    methods: {
		         submitForm(formName) {
					 postRequest('/addregister',this.ruleForm).then(resp => {
				      
						  alert("患者挂号成功！");
					 }).catch((err)=>
					 {
						  alert("患者挂号失败，请重新操作！");
					 }
					 );
		         },
		         resetForm(formName) {
		           this.$refs[formName].resetFields();
		         }
		       }
	}
</script>
<style>
	.arow {
		margin-bottom: 20px;
		background-color: #FFFFFF;
		background: #FFFFFF;
	}

	.add.el-col{
		background-color: #FFFFFF;
	}
</style>
